<!doctype html>
<html lang="zh-cn">
    
    <head>
        <meta charset="UTF-8">
        <title>
            BMI
        </title>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <meta content="no" name="apple-mobile-web-app-capable" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />
        <link href="__PUBLIC__/css/style.css" rel="stylesheet" type="text/css">
        <script src="__PUBLIC__/js/jquery.js" type="text/javascript"></script>
        <script src="__PUBLIC__/js/jquery-add-yu.js" type="text/javascript"></script>
    </head>
    
    <body style="background:#F5F5F5;">
        <div class="header">
        </div>
        <header>
            <b>
            </b>
            <strong class="s0{$user['sex']}">
                {$user['name']}<empty name="user.age">
                                    
                                    <else />
                                    |{$user['age']}岁
                                </empty>
            </strong>
            <span>
                体重指数（BMI）
            </span>
        </header>
        <section id="bmi-section">
            <ul>
                <li id="img1">
                    <img src="" alt="" />
                    <span>
                        精力充沛
                    </span>
                </li>
                <li id="img2">
                    <img src="" alt="" />
                    <span>
                        魅力难挡
                    </span>
                </li>
                <li id="img3">
                    <img src="" alt="" />
                    <span>
                        轻松生活
                    </span>
                </li>
            </ul>
            <if condition="$user['sex'] eq 2">
                <div class="bd-container female">
                    <for start="1" end="20">
                        <if condition="$user['bmipic'] eq $i">
                            <img class="bd f{$i} top" src="__PUBLIC__/images/female/f{$i}.png" alt=""/>
                            <else/>
                            <img class="bd f{$i}" src="__PUBLIC__/images/female/f{$i}.png" alt=""/>
                        </if>
                    </for>
                </div>
            </if>
            <if condition="$user['sex'] eq 1">
                <div class="bd-container male">
                    <for start="1" end="20">
                        <if condition="$user['bmipic'] eq $i">
                            <img class="bd f{$i} top" src="__PUBLIC__/images/male/m{$i}.png" alt=""/>
                        <else/>
                            <img class="bd f{$i}" src="__PUBLIC__/images/male/m{$i}.png" alt="" />
                        </if>
                    </for>
                </div>
            </if>
        </section>
        <div class="range-container">
            <span class="bmi-span" style="left:{$user['bmip']}px;">
                <!-- left=( x - 7.6)*5.07 -->
                {$user['bmi']}
                <img src="__PUBLIC__/images/spot.png" />
            </span>
            <span style="font-size: 12px; position:absolute; left: -4px; top: -3px">
                BMI
            </span>
            <input id="range" type="range" min="10" max="40" step="0.1" value="{$user['bmi']}"/>
            <div class="range-num" style="margin: -10px 0 0 0">
                <span style="position: absolute; top: 10px; left: 45px; font-size: 12px">
                    15.8
                </span>
                <span style="position: absolute; top: 10px; left: 90px; font-size: 12px">
                    23
                </span>
                <span style="position: absolute; top: 10px; left: 136px; font-size: 12px">
                    30
                </span>
            </div>
        </div>
        <section class="intro">
            <h2>
                BMI计算方法
            </h2>
            <img src="__PUBLIC__/images/zs.png" alt="" />
            <div class="txt">
                体质指数(BMI) = 体重(kg) ÷ 身高^2 (m)
            </div>
        </section>
        <!--
        <section class="intro">
            <h2>
                BMI的意义
            </h2>
            <img src="__PUBLIC__/images/zs.png" alt="" />
            <div class="txt">
                BMI是与体内脂肪总量密切相关的指标,该指标考虑了体重和身高两个因素。BMI简单、实用、可反映全身性超重和肥胖。 在测量身体因超重而面临心脏病、高血压等风险时，比单纯的以体重来认定，更具准确性。
            </div>
        </section>
         -->
        <img src="__PUBLIC__/images/bmi02.jpg" width="100%">
        <script src="jquery-2.1.1.min.js">
        </script>
        <script>
            $(function() {
                $('#range').on('change',
                function() {
                    var v = $(this).val();
                    // alert(v);
                    console.log(v);
                    if (v >= 10) {
                        if (v < 11.5) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f1').addClass('top');
                        } else if (v < 13) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f2').addClass('top');
                        } else if (v < 14.5) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f3').addClass('top');
                        } else if (v < 16) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f4').addClass('top');
                        } else if (v < 17.5) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f5').addClass('top');
                        } else if (v < 19) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f6').addClass('top');
                        } else if (v < 20.5) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f7').addClass('top');
                        } else if (v < 22) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f8').addClass('top');
                        } else if (v < 23.5) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f9').addClass('top');
                        } else if (v < 25) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f10').addClass('top');
                        } else if (v < 26.5) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f11').addClass('top');
                        } else if (v < 28) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f12').addClass('top');
                        } else if (v < 29.5) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f13').addClass('top');
                        } else if (v < 31) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f14').addClass('top');
                        } else if (v < 32.5) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f15').addClass('top');
                        } else if (v < 34) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f16').addClass('top');
                        } else if (v < 35.5) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f17').addClass('top');
                        } else if (v < 37) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f18').addClass('top');
                        } else if (v <= 40) {
                            $('#bmi-section .bd').removeClass('top');
                            $('#bmi-section .f19').addClass('top');
                        }
                    }
                    if (v >= 10) {
                        if (v < 15.8) {
                            $('#img1 img').attr('src', '__PUBLIC__/images/1-1.png');
                            $('#img1 span').html('免疫力下降');
                            $('#img2 img').attr('src', '__PUBLIC__/images/1-2.png');
                            $('#img2 span').html('容易骨折');
                            $('#img3 img').attr('src', '__PUBLIC__/images/1-3.png');
                            $('#img3 span').html('不孕不育风险');
                        } else if (v < 23) {
                            $('#img1 img').attr('src', '__PUBLIC__/images/2-1.png');
                            $('#img1 span').html('精力充沛');
                            $('#img2 img').attr('src', '__PUBLIC__/images/2-2.png');
                            $('#img2 span').html('魅力难挡');
                            $('#img3 img').attr('src', '__PUBLIC__/images/2-3.png');
                            $('#img3 span').html('轻松生活');
                        } else if (v < 30) {
                            $('#img1 img').attr('src', '__PUBLIC__/images/3-1.png');
                            $('#img1 span').html('不自信');
                            $('#img2 img').attr('src', '__PUBLIC__/images/3-2.png');
                            $('#img2 span').html('慢性病风险');
                            $('#img3 img').attr('src', '__PUBLIC__/images/3-3.png');
                            $('#img3 span').html('运动疲累');
                        } else if (v < 40) {
                            $('#img1 img').attr('src', '__PUBLIC__/images/4-1.png');
                            $('#img1 span').html('抑郁症风险');
                            $('#img2 img').attr('src', '__PUBLIC__/images/4-2.png');
                            $('#img2 span').html('心脏病风险');
                            $('#img3 img').attr('src', '__PUBLIC__/images/4-3.png');
                            $('#img3 span').html('糖尿病风险');
                        }
                    }
                }); (function init() {
                    $('#img1 img').attr('src', '__PUBLIC__/images/2-1.png');
                    $('#img2 img').attr('src', '__PUBLIC__/images/2-2.png');
                    $('#img3 img').attr('src', '__PUBLIC__/images/2-3.png');
                })();
            });
            function getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
        </script>
    </body>

</html>